import React, { useState, useEffect, useRef } from "react";
import styles from "./table.module.scss";
import XvPagination from "./pagination";
import { Spin } from "antd";
import EmptyView from "@/component/empty/empty";

const XVtable = ({
    loading = false,
    columns = [],
    dataSource = [],
    pagination = {
        current: 1,
        defaultPageSize: 20,
        defaultCurrent: 1,
        total: 0,
        onChange: (value) => {
            console.log("切换分页", value);
        }
    },
    onDoubleClick = null,
    onClick = null,
}) => {
    const [state, setState] = useState([]);
    const [useColumns, setUseColumns] = useState([]);
    useEffect(() => {
        let list = [];
        const dataIndexList = columns.map(item => item.dataIndex);
        list = dataSource.map((obj, index) => {
            let object = obj;
            return object;
        })
        setUseColumns(dataIndexList);
        setState(list);
    }, [dataSource, columns])

    // 根据传进来的key值拿到columns中的其他配置
    const getOther = (key) => {
        let obj = {};
        columns.forEach(item => {
            if (item.dataIndex === key) {
                obj = item;
            }
        })
        return obj;
    }

    // 生成tr
    const TrElement = ({ key, object }) => {
        // console.log("生成tr用的接收到的object", object);
        let tdData = [];
        for (let key in object) {
            let obj = getOther(key);
            obj.value = object[key];
            obj.show = false;
            if (useColumns.includes(key)) {
                obj.show = true
            }
            tdData.push(obj)
        }
        return <tr

            className="tr"
            key={key}
            onClick={(e) => {
                onClick && onClick(object, e);
            }}
            onDoubleClick={(e) => {
                onDoubleClick && onDoubleClick(object, e);
            }}
            style={{
                display: 'flex'
            }}
        >
            {

                tdData.map((i, k) => {
                    if (i.show) {
                        return <td className="td" key={k}
                            style={i.width ? {
                                width: i.width
                            } : {
                                flex: 1
                            }}

                        >{i.value}</td>
                    }
                    return null

                })
            }
        </tr>
    }

    const tabRef = useRef();
    const spinRef = useRef();

    const [height, setHegiht] = useState(0);
    const [width, setWidth] = useState(0);
    useEffect(() => {
        if (tabRef) {
            setTimeout(() => {
                let div = tabRef.current;
                setHegiht(div.offsetHeight);
                setWidth(div.offsetWidth);
            }, 300)
        }
    }, [])


    return (
        <>
            <div className={styles.table_box}>
                <table className="table"
                    style={{
                        wordWrap: "break-word",
                        wordBreak: "break-all"
                    }}>
                    <thead className="theader">
                        <tr style={{
                            display: 'flex'
                        }}>
                            {
                                columns.map((item, index) => {

                                    return <td key={index}
                                        style={item.width ? {
                                            width: item.width
                                        } : {
                                            flex: 1
                                        }}
                                    >{item.title}</td>
                                })
                            }
                        </tr>
                    </thead>
                    <tbody className="tbody" ref={tabRef}>
                        <div className="tb-container" style={{
                            height: height,
                            width: width
                        }}>
                            <Spin
                                rootClassName="root-spin"
                                className="root-class"
                                wrapperClassName="wrap-class"
                                ref={spinRef}
                                spinning={loading}
                            >
                                {
                                    state.length > 0 && state.map((item, index) => <TrElement key={index} object={item} />)
                                }
                                {
                                    (state.length === 0 && loading === false) && <EmptyView />
                                }
                            </Spin>

                        </div>



                    </tbody>
                </table>
                {
                    (pagination === false || pagination == null) ? null : <XvPagination {...pagination} />
                }
            </div>

        </>
    )
}
export default XVtable;